<template>
  <div>
    <div id="map"
         class="map">
    </div>
    <div id='info'></div>
  </div>
</template>
<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import ImageLayer from 'ol/layer/Image.js';
import TileWMS from 'ol/source/TileWMS.js';
import ImageWMS from 'ol/source/ImageWMS';
import Projection from 'ol/proj/Projection';

export default {
  data () {
    return {
      infoUrl: '',
      map: null,
      wmsSource: null
    }
  },
  methods: {

  },
  mounted () {
    var format = 'image/png';
    var wmsSource = this.wmsSource = new TileWMS({
      url: 'http://localhost:8082/geoserver/topp/wms',
      params: {
        "LAYERS": 'topp:states',
        tiled: true,
      },
      crossOrigin: 'anonymous'
    });

    var wmsLayer = new TileLayer({
      source: wmsSource
    });
    var projection = new Projection({
      code: 'EPSG:4326',
      units: 'degrees',
      axisOrientation: 'neu',
      global: true
    });
    var view = new View({
      center: [-100, 40],
      zoom: 5,
      projection: 'EPSG:4326'
    });

    var map = this.map = new Map({
      layers: [wmsLayer],
      target: 'map',
      view: view
    });
    map.on('singleclick', evt => {
      //document.getElementById('info').innerHTML = '';
      var viewResolution = this.map.getView().getResolution();
      var url = this.wmsSource.getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:4326',
        { 'INFO_FORMAT': 'text/html' });
      console.log(url);
      if (url) {
        /* document.getElementById('info').innerHTML =
           '<iframe seamless src="' + url + '"></iframe>'; */
        this.$http.get(url).then(response => {
          document.getElementById('info').innerHTML = response.body;
        })
        // this.infoUrl = url;
      }
    });

    map.on('pointermove', evt => {
      //debugger;
      if (evt.dragging) {
        return;
      }
      var pixel = this.map.getEventPixel(evt.originalEvent);
      var hit = this.map.forEachLayerAtPixel(pixel, (layer, colorArr) => {
        return true;
      });
      this.map.getTargetElement().style.cursor = hit ? 'pointer' : '';

    });
  },
}
</script>
<style lang="sass" scoped>
#map {height: 800px;}
</style>
